import Bar from "./Bar";
import Q from "../../lib/qunee-es";
import Overview from "./Overview";
import { timers } from "jquery";
const tpl = `
<div class="form-horizontal">
	<ul class="nav nav-tabs justify-content-center" id="propTab" role="tablist">
		<li class="nav-item">
			<a class="nav-link active" id="element-tab" data-toggle="tab" href="#element" role="tab" aria-controls="element"
				aria-selected="true">元素</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="node-tab" data-toggle="tab" href="#node" role="tab" aria-controls="node"
				aria-selected="false">数据</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" id="text-tab" data-toggle="tab" href="#text" role="tab" aria-controls="text"
				aria-selected="false">市场</a>
		</li>
	</ul>
	<div class="tab-content" >
		<div class="tab-pane fade show active" id="element" role="tabpanel" aria-labelledby="element-tab">
		</div>
		<div class="tab-pane fade" id="node" role="tabpanel" aria-labelledby="node-tab">
			<div class="class-group">
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">坐标</label>
					<div class="input-group input-group-sm col-sm-8">
					<input class="form-control" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">旋转</label>
					<div class="input-group input-group-sm col-sm-8">
					<input class="form-control" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">边框</label>
					<div class="input-group input-group-sm col-sm-8">
					<input class="form-control" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">边框颜色</label>
					<div class="input-group input-group-sm col-sm-8 colorpicker-element">
					<input class="form-control" />
					<span class="input-group-addon"><i></i></span>
					</div>
				</div>
			</div>
		</div>
		<div class="tab-pane fade" id="text" role="tabpanel" aria-labelledby="text-tab">
			<div class="class-group">
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">尺寸</label>
					<div class="input-group input-group-sm col-sm-8">
					<input class="form-control" />
					</div>
				</div>
				<div class="form-group row">
					<label class="col-sm-4 control-label font-small">背景色</label>
					<div class="input-group input-group-sm col-sm-8 colorpicker-element">
					<input class="form-control" />
					<span class="input-group-addon"><i></i></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
	`;
	// <div id="overview" style="width: 100%;height: 180px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);position: absolute;right: 0px;bottom: 0px;background-color: #FFF;"></div>

// 右侧属性栏
class PropBar extends Bar {
	constructor(options) {
		super(options);

		this.options = options;
		this.editor = options.editor;

		this.init();
	}

	init() {
		this.$bar = $(tpl);
		this.$parent.append(this.$bar);
		// this.overview = new Overview(this.$bar.find("#overview").get(0), this.editor.graph);
	}

	//
	onElementChange(evt) {
		var ele = evt.source;
		if (this.currentElement != ele) {
			return;
		}
		if (this.eleProp) {
			this.eleProp.update(evt);
		}
	}

	show(ele) {
		this.currentElement = ele;
		var $elePropRoot = $("#element");
		$elePropRoot.empty();
		if (!ele || ele instanceof Q.Graph) {
			// this.$bar.find("#inputName").val(this.editor.graphInfo.Name).trigger("change");
			this.eleProp = new GraphProp(this, ele, $elePropRoot);
			return;
		}
		if (ele instanceof Q.Text) {
			this.eleProp = new TextProp(this, ele, $elePropRoot);
			return;
		}
		if (ele instanceof Q.Edge) {
			this.eleProp = new EdgeProp(this, ele, $elePropRoot);
			return;
		}
		if (ele instanceof Q.Group) {
			this.eleProp = new GroupProp(this, ele, $elePropRoot);
			return;
		}
		if (ele instanceof Q.Node) {
			this.eleProp = new NodeProp(this, ele, $elePropRoot);
			return;
		}
	}
}

export default PropBar;

class EleProp {
	constructor(propBar, ele, $parent) {
		this.propBar = propBar;
		this.ele = ele;
		this.$parent = $parent;
		this.$root = $(`<div class="class-group"></div>`);
		$parent.append(this.$root);
	}
	// options {label , id , type ,value , onchange , listener}
	appendInput(options) {
		options.id = options.id || Math.random() + "";
		var $row = $(
			`<div class="md-form">
			<label for="${options.id}">${options.label}</label>
			<input class="form-control" type="${options.type || "text"}" id="${options.id}" value="${options.value || ""}" ${
				options.readonly ? 'readonly="readonly"' : ""
			}>
		</div>`
		);
		this.bind($row, options);
		return $row;
	}
	bind($row, options) {
		this.$root.append($row);
		var $input = $row.find("input,textarea,select");
		if (options.value) {
			$input.trigger("change");
		}
		if (options.onchange) {
			//input value changes
			$input.change(options.onchange);
		}
		// options.listener((v)=>{ // listener value change
		// 	$input.val(v).trigger("change");
		// })
	}
	appendRow() {
		return new PropRow(this.$root);
	}
	appendTextArea(options) {
		options.id = options.id || Math.random() + "";
		var $row = $(
			`<div class="form">
			<label for="${options.id}">${options.label}</label>
			<textarea class="md-textarea form-control" id="${options.id}" ${options.readonly ? 'readonly="readonly"' : ""} rows="3">${
				options.value || ""
			}</textarea>
		</div>`
		);
		this.bind($row, options);
		return $row;
	}
	appendButton(options) {
		var $row = $(`
		<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="button">${options.label}</button>
		`)
		this.$root.append($row);
		if(options.onclick) {
			$row.click(options.onclick)
		}
		return $row
	}
	appendSelect(options) {}
	remove() {
		this.$root.remove();
	}
	update(evt) {}

	initLocation() {
		var locationRow = this.appendRow();
		var propBar = this.propBar
		var ele = this.ele
		if (this.propBar.editor.isMapGraph) {
			this.$x = locationRow.col({ label: "Lat", value: this.ele.lonLat.lat });
			this.$y = locationRow.col({ label: "Lon", value: this.ele.lonLat.lng });
			this.$zoom = this.appendInput({ label: "Zoom", value: this.ele.zoom, onchange:function(evt){
				propBar.editor.sendUpdateElement({ Id: ele.id , Props:{zoom:$(this).val()*1}});
			}});
		} else {
			this.$x = locationRow.col({ label: "X", value: ele.x, readonly: true });
			this.$y = locationRow.col({ label: "Y", value: ele.y, readonly: true });
		}
		this.locationRow = locationRow;
	}


	updateLocation(evt) {
		var ele = evt.source;
		if ("location" == evt.kind) {
			if (this.propBar.editor.isMapGraph) {
				var ll = this.propBar.editor.graph.getLonLatFromPixel(ele.x,ele.y)
				this.$x.find("input").val(ll.lat);
				this.$y.find("input").val(ll.lng);
			} else {
				this.$x.find("input").val(ele.x);
				this.$y.find("input").val(ele.y);
			}
		}
	}
}
class GraphProp extends EleProp {
	constructor(propBar, ele, $parent) {
		super(propBar, ele, $parent);
		var self = this

		this.$name = this.appendInput({
			id: "inputName",
			label: "名称",
			value: propBar.editor.graphInfo.Name,
			onchange: function (evt) {
				propBar.editor.sendUpdateGraph({ Name: $(this).val() });
			},
		});
		if(this.propBar.editor.isMapGraph) {
			this.initMap()
		}
		
		
	}
	initMap() {
		var self = this
		var propBar = this.propBar
		var map = propBar.editor.graph.map
		var centerRow = this.appendRow()
		var center = map.getCenter()
		this.$lat = centerRow.col({
			label: "Center Lat",
			value: center.lat,
			readonly:true
		})
		this.$lng = centerRow.col({
			label: "Center Lon",
			value: center.lng,
			readonly:true
		})

		this.$zoom = this.appendInput({
			label: "Zoom",
			value: map.getZoom(),
			readonly:true
		});
		this.$btnSet = this.appendButton({
			label:"设置为中心",
			onclick:function(evt){
				var center = map.getCenter()
				propBar.editor.sendUpdateGraph({Props:{zoom:map.getZoom() ,x:center.lat, y:center.lng}})
			}
		})

		map.on("zoomend" , function(evt){
			var center = map.getCenter()
			self.$lat.find("input").val(center.lat)
			self.$lng.find("input").val(center.lng)
			self.$zoom.find("input").val(map.getZoom())
		})
		map.on("move" , function(evt){
			var center = map.getCenter()
			self.$lat.find("input").val(center.lat)
			self.$lng.find("input").val(center.lng)
		})
	}
}
class NodeProp extends EleProp {
	constructor(propBar, ele, $parent) {
		super(propBar, ele, $parent);
		this.$name = this.appendInput({
			label: "名称",
			value: ele.name,
			onchange: function (evt) {
				ele.name = $(this).val();
				// propBar.editor.sendUpdateElement({Id:ele.id,Props:{name:$(this).val()}})
			},
		});
		this.initLocation();
	}

	update(evt) {
		this.updateLocation(evt)
		var ele = evt.source;
		var $input = this.$name.find("input");
		if ("name" == evt.kind && ele.name != $input.val()) {
			$input.val(ele.name);
		}
		
	}
}
class EdgeProp extends EleProp {
	constructor(propBar, ele, $parent) {
		super(propBar, ele, $parent);
		this.$name = this.appendInput({
			label: "名称",
			value: ele.name,
			onchange: function (evt) {
				ele.name = $(this).val();
			},
		});
		this.$from = this.appendInput({ label: "From", value: ele.from.name, readonly: true });
		this.$to = this.appendInput({ label: "To", value: ele.to.name, readonly: true });
	}
	update(evt) {
		var ele = evt.source;
		var $input = this.$name.find("input");
		if ("name" == evt.kind && ele.name != $input.val()) {
			$input.val(ele.name);
		}
	}
}
class TextProp extends EleProp {
	constructor(propBar, ele, $parent) {
		super(propBar, ele, $parent);
		this.$name = this.appendTextArea({
			label: "名称",
			value: ele.name,
			onchange: function (evt) {
				ele.name = $(this).val();
			},
		});
		this.initLocation();
	}
	update(evt) {
		this.updateLocation(evt)
		var ele = evt.source;
		var $input = this.$name.find("textarea");
		if ("name" == evt.kind && ele.name != $input.val()) {
			$input.val(ele.name);
		}
	}
}
class GroupProp extends EleProp {
	constructor() {}
}

class PropRow {
	constructor($parent) {
		this.$root = $(
			`<div class="row">
			</div>
			`
		);
		$parent.append(this.$root);
	}
	// {id,label,type}
	col(options) {
		options.id = options.id || "" + Math.random();
		var $c = $(
			`<div class="col"><div class="form mt-2">
				<label for="${options.id}">${options.label}</label>
				<input class="form-control" type="${options.type || "text"}" id="${options.id}" value="${options.value || ""}" ${
				options.readonly ? 'readonly="readonly"' : ""
			}>
			</div></div>`
		);
		this.$root.append($c);
		var $input = $c.find("input");
		if (options.value) {
			$input.trigger("change");
		}
		if (options.onchange) {
			$input.change(options.onchange);
		}
		return $c;
	}
}
